/**
 * @author lulongwen
 * Date: 2023-09-03 14:59
 * Description:
 */

import React, { memo } from 'react';
// import PropTypes from 'prop-types';
import { Row, Col } from 'antd';
import cls from 'classnames';

// 预设节点
import { allowedNodes } from './nodes-edges';
import * as shapes from '../components/shapes';
// import styles from './style.module.less';

const PREFIX = 'Resizable';
const clsCenter = 'flex flex-col items-center justify-center';

ViewPanel.propTypes = {

};

function ViewPanel() {

  /**
   * 拖拽添加节点
   * Sider 中触发节点的 onDragStart 事件，并传递参数
   * 然后在 Graph 中通过 ReactFlow onDrop 来接收拖拽的节点
   * @param e {React.DragEvent<HTMLDivElement>}
   * @param item {object}
   */
  function onDragStart(e: React.DragEvent<HTMLDivElement>, item: any) {
    // 被拖拽的节点类型, 值必须是是个字符串
    e.dataTransfer.setData('application/reactflow', JSON.stringify(item));
    e.dataTransfer.effectAllowed = 'move';
  }

  return (
    <Row gutter={[1, 1]}>
      {allowedNodes.map((item, index, i) => {
        const key = item.type.replace(PREFIX, '');
        const Component = shapes[key];

        return (
          <Col
            key={item.nodeId ?? index}
            span={12}
            className={cls(clsCenter, item.className)}
            style={{height: 60, background: '#eee'}}
            onDragStart={(e) => onDragStart(e, item)}
            draggable
          >
            <div className='mb-1'>
              <Component />
            </div>
            <span className='text-xs scale-75'>
              {item.name}
            </span>
          </Col>
        )
      })}
    </Row>
  );
}

export default memo(ViewPanel);
